<template>
	<view class="cargoP">
		<view class="searchPP">
			<view class="searchP">
				<view class="search" :style="{ width: '100%' }">
					<u-search placeholder="请输入您要搜索的设备SN" shape="round" @search='search' v-model="keyword" :show-action="false"></u-search>
				</view>
			</view>
		</view>
		<view class="hr-line" style="height: 0.2rem; background-color: #f3f5f7"></view>

		<view class="scan" style="border-bottom: 1px solid #f2f2f2;">
			<view @click="ScanM()" style="display: flex; align-items: center">
				<image style="padding: 0.5rem; width: 2rem; height: 2rem" src="../../style/image/cargo/scan.png" alt="" />
				<view style="font-size: 0.84rem;font-family: PingFang SC;font-weight: 399;color: #000000;">
					扫一扫(扫描设备二维码快捷铺货)
				</view>
			</view>
			<image style="width: 0.5rem; height: 0.8rem; padding: 1rem" src="../../style/image/cargo/back.png" alt="" />
		</view>
		<view @click="chargerM()" class="scan">
			<view style="display: flex; align-items: center">
				<image style="padding: 0.5rem; width: 2rem; height: 2rem" src="../../style/image/cargo/charger.png" alt="" />
				<view style="font-size: 0.84rem;font-family: PingFang SC;font-weight: 399;color: #000000;">
					充电线
				</view>
			</view>
			<image style="width: 0.5rem; height: 0.8rem; padding: 1rem" src="../../style/image/cargo/back.png" alt="" />
		</view>

		<view>
			<view style="display: flex; align-items: center; background-color: #f3f5f7">
				<view style="width: 50%; text-align: center;position: absolute;z-index: 999;width: 50%;display: flex;align-items: center;// justify-content: center;
					margin-left: 3rem;">选择设备
				</view>
				<u-dropdown>
					<u-dropdown-item v-model="value2" :title="value2" active-color="#02af74" :options="options2" @change="changeOption2"></u-dropdown-item>
				</u-dropdown>
			</view>
		</view>
		<view class="tabwiperC">
			<u-tabs-swiper ref="tabs" :list="list" name="modelsName" active-color="#4dbf92" inactive-color="" count="count"
			 height="120" :is-scroll="false" :current="current" bar-width="80" gutter="80" @change="tabsChange"></u-tabs-swiper>
		</view>
		<view class="showDataC">
			<u-empty style="margin: 3rem auto;" v-if="showDataListS.length==0 && !isLoading" text="暂无数据" mode="data"></u-empty>
			<view class="showDataC-item" v-for="(item, index) in showDataListS" :key="index">
				<view class="showDataC-item-child" v-if="item.status == 0" :style="{ border: '1px solid #02B074' }">
					<view class="Icon">
						<image v-if="item.status == 0" style="width: 2rem; height: 1rem" src="../../style/image/cargo/A2-1.png" alt="" />
						<image v-else style="width: 2rem; height: 1rem" src="../../style/image/cargo/A2-2.png" alt="" />
					</view>

					<view @click="selectClickM(item,index)" class="Icon-bottom">
						<image v-if="item.select == false" style="width: 1rem; height: 1rem" src="../../style/image/cargo/round.png" alt="" />
						<image v-else style="width: 1rem; height: 1rem" src="../../style/image/cargo/selectRound.png" alt="" />
					</view>

					<view class="showDataC-item-content">
						<view style="font-size: 0.72rem;font-family: PingFang SC;font-weight: 400;margin: 0.2rem;color: #02af74;">
							设备SN:
						</view>
						<view style="font-size: 0.62rem;font-family: PingFang SC;font-weight: 300;margin: 0.2rem;color: #02af74;">
							{{ item.sn }}
						</view>
					</view>
				</view>

				<view v-else class="showDataC-item-child" :style="{ border: '1px solid #999999' }" @click="Modify(item)">
					<view class="Icon">
						<image v-if="item.status == 0" style="width: 2rem; height: 1rem" src="../../style/image/cargo/A2-1.png" alt="" />
						<image v-else style="width: 2rem; height: 1rem" src="../../style/image/cargo/A2-2.png" alt="" />
					</view>

					<!-- 
                    <view class="Icon-bottom" >
                      <image  v-if="item.status==true"   style="width: 1rem" src="../../style/image/cargo/round.png"  alt="">
                      <image  v-else style="width: 1rem" src="../../style/image/cargo/selectRound.png" alt="">
                    </view> -->

					<view class="showDataC-item-content">
						<view style="font-size: 0.72rem;font-family: PingFang SC;font-weight: 400;margin: 0.2rem;color: #787878;">
							设备SN
						</view>
						<view style="font-size: 0.62rem;font-family: PingFang SC;font-weight: 300;margin: 0.2rem;color: #787878;">
							{{ item.sn }}
						</view>
					</view>
				</view>
			</view>
		</view>

		<uni-load-more v-show="loadmoreModal" @clickLoadMore="clickLoadMore" :content-text="contentText" :status="status"></uni-load-more>

		<view @click="goCargoM" class="cargoBtnC">去铺货</view>

		<!-- <bar></bar> -->
	</view>
</template>

<script lang='ts'>
	import {
		Component,
		Prop,
		Vue,
		Watch,
		Emit
	} from "vue-property-decorator";
	import bar from "@/pages/home/topbar.vue";

	import uniLoadMore from '../loadMore/uni-load-more.vue'

	import {
		AppModule
	} from "../../store/modules/app";

	import {
		findTerminalBox,
		findPosType,
		findTerminalByType,
	} from "../../utils/uniApi";
	// import VConsole from "vconsole";
	// const vConsole = new VConsole();

	@Component({
		//   @Component  是一个装修器   不可以在下面写语句
		name: "test",
		components: {
			bar,
			uniLoadMore
		},
	})
	export default class extends Vue {
		@Prop({
			type: String, // 父组件传递给子组件的数据类型
			required: false, // 是否必填
			default: " ", // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
		})
		msg!: string;

		public isLoading = false; //是否加载中
		public keyword = ""; //搜索框
		public list: any = []; //tabsChange的数据源
		public current = 0; //tabsChange的index
		public showDataListS: any = []; //列表的数据源

		//选择设备的下拉框  数据源
		public options2: Array < object > = [{
				label: "全部设备",
				value: 1,
			},
			{
				label: "已铺货",
				value: 2,
			},
			{
				label: "未铺货",
				value: 3,
			},
		];
		public value2 = "全部设备"; //选择设备的下拉框 选中的值
		public state = ""; //选择设备的下拉框选中的值的code

		public continueTypes = true;
		public stopTypes = false

		//加载
		// public status = "nomore";
		// public loadText = {
		//   loadmore: "轻轻上拉",
		//   loading: "努力加载中",
		//   nomore: "暂无更多数据",
		// };
		public status = 'more'
		public contentText = {
			contentdown: '下拉或点击查看更多',
			contentrefresh: '加载中',
			contentnomore: '没有更多'
		}
		public loadmoreModal = false
		// public statusTypes=[{
		// 		value: 'more',
		// 		text: '加载前',
		// 		checked: true
		// 	}, {
		// 		value: 'loading',
		// 		text: '加载中',
		// 		checked: false
		// 	}, {
		// 		value: 'noMore',
		// 		text: '没有更多',
		// 		checked: false
		// 	}]

		public pageData = 1; //页数
		public posTypeId = "";

		public selectList: any = []; //选中的数据

		public searchFlag = false;

		public id = "";

		created() {}
		onHide() {
			uni.hideLoading();
		}

		onLoad() {
			console.log('第一次计入')
		}
		onShow(){
			this.showDataListS=[]
			this.findTerminalByTypeM();
			// console.log('show')
		}
		mounted() {
			uni.showLoading({
				title: "加载中",
			});

			this.findPosTypeM();
			
		}
		
		onPullDownRefresh() {
			this.findPosTypeM();
			setTimeout(() => {
				// uni.redirectTo({
				//   url: "../../pages/cargo/index",
				// });
				uni.stopPullDownRefresh();
			}, 1000);
		}
		clickLoadMore() {
			if (this.stopTypes == false) {
				// console.log("21312332121312312下拉加载");
				this.pageData = this.pageData + 1;
				// this.showDataListS=[]
				this.findTerminalByTypeM();
			}
		}
		//修改计费方式
		Modify(vaule: any) {
			if (vaule.status == 1) {
				uni.navigateTo({
					url: "./Modify?id=" + encodeURIComponent(JSON.stringify(vaule))
				})
				vaule = {}
			} else {}

			console.log(vaule, '组件通信')
		}
		onReachBottom() {
			// console.log('下拉刷新')
			if (this.stopTypes == false) {
				// console.log("21312332121312312下拉加载");
				this.pageData = this.pageData + 1;
				// this.showDataListS=[]
				this.findTerminalByTypeM();
			}
		}

		//当前登录人所拥有的设备机型分组
		findPosTypeM() {
			uni.showLoading({
				title: "加载中",
			});
			this.list = []
			let params = {
				userId: uni.getStorageSync("userId") == "" ? "" : parseInt(uni.getStorageSync("userId")),
			};
			findPosType(params).then((res: any) => {
					uni.hideLoading();
					if (res !== null) {
						res.data.data.filter((item: any, index: number) => {
							if (this.posTypeId == "") {
								this.posTypeId = res.data.data[0].posTypeId;
							} else {

							}
							// console.log("this.posTypeId", this.posTypeId);
							// this.typeContList.push(item.typeCont);
							var obj: object = {
								modelsName: `${ item.modelsName == null ? "暂无设置" : item.modelsName }(${item.typeCont})`,
								posTypeId: item.posTypeId,
								typeCont: item.typeCont,
							};
							this.list.push(obj); //头部
						});
					} else {
						uni.showToast({
							title: "请求失败",
							icon: "none",
							duration: 2000,
						});
					}
					return res
				})
				.then((res: any) => {
					// console.log(res, 'then的res')
					uni.hideLoading();
					if (res.data.data.length > 0) {
						this.findTerminalByTypeM();
					} else {
						uni.showToast({
							title: "该用户暂无设备",
							icon: "none",
							duration: 4000,
						});
					}
				});
		}

		findTerminalByTypeM() {
			uni.showLoading({
				title: "加载中",
			});
			this.isLoading = true
			this.loadmoreModal = true
			let paramsed = {
				userId: uni.getStorageSync("userId") == "" ? "" : parseInt(uni.getStorageSync("userId")),
				keyWord: this.keyword,
				posTypeId: this.posTypeId, // 机型ID
				state: this.state, //铺货状态 yph 已铺货|wph 未铺货
				pageNo: this.pageData,
				pageSize: 10,
			};
			findTerminalByType(paramsed).then((res: any) => {
					this.isLoading = false

					uni.hideLoading();
					console.log(res, "111111获取每一个机型的列表数组数据");
					// this.continueType=res.data.hasNext  //true
					// res.data.data.forEach((vaule:any, index:any) => {
					// 	this.id = res.data.data[index].id
					// 	console.log(this.id, "设备id++++")
					// })
					if (res.data.data == null) {

						uni.showToast({
							title: "请求数据失败",
							icon: "none",
							duration: 2000,
						});
					} else {
						var boolee = res.data.hasNext == false && this.continueTypes == false;
						if (res.data.hasNext == true) {
							this.status = "more";
						} else {
							this.status = "noMore";
						}
						// console.log(res.data.hasNext, this.continueTypes, boolee);
						if (res.data.isFirst || !boolee) {
							res.data.data.filter((item: any, index: number) => {
								var isSelect = false
								this.selectList.filter((itemd: any, indexd: any) => {
									if (itemd === item.sn) {
										isSelect = true;
									}
								})
								item["select"] = isSelect;
								// this.showDataListS.push(item);
							});
							if (this.showDataListS.length > 0 && this.pageData == 1) { //搜索  删除已有数据
								this.showDataListS = [];
								this.stopTypes = false
							}
							// cthis.showDataListS=[]onsole.log(this.showDataListS.concat(res.data.data))

							this.showDataListS = this.showDataListS.concat(res.data.data)
							if (res.data.hasNext == false) {
								this.continueTypes = false;
							}
						} else {
							this.stopTypes = true
						}
					}
				})
				.then(() => {
					// this.showDataListS=Array.from(new Set(this.showDataListS))
					if (this.searchFlag == true) {
						this.showDataListS = this.showDataListS.reduce(
							(all: any, next: any) =>
							all.some((item: any) => item.id == next.id) ?
							all : [...all, next],
							[]
						);
						this.searchFlag = false;
					}
				});
		}

		tabsChange(index: any) {
			this.pageData = 1;
			this.continueTypes = true;
			this.showDataListS = [];
			this.stopTypes = false
			this.current = index;
			this.getBarId(index);
		}
		//获取当前bar对应的 ’id‘
		getBarId(index: any) {
			this.list.filter((itemed: any, indexed: number) => {
				if (index == indexed) {
					console.log(itemed);
					this.posTypeId = itemed.posTypeId;
					this.findTerminalByTypeM();
				}
			});
		}

		changeOption2(index: any) {
			this.showDataListS = [];
			this.stopTypes = true
			this.options2.filter((item: any, indexd: any) => {
				if (item.value == index) {
					console.log(item.label, "item.label");
					this.value2 = item.label;
					if (item.label == "全部设备") {
						this.state = "";
					} else if (item.label == "已铺货") {
						this.state = "yph";
					} else {
						this.state = "wph";
					}
					this.findTerminalByTypeM();
				}
			});
		}
		//cell的选中
		selectClickM(data: any, index: any) {
			this.showDataListS.filter((itemd: any, indexd: any) => {
				if (index == indexd) {
					itemd.select = !itemd.select
					if (itemd.select) {
						this.selectList.push(itemd.sn);
					} else {
						this.selectList.filter((item: any, index: any) => {
							if (item == itemd.sn) {
								this.selectList.splice(index, 1);
							}
						})
					}
				}
			})
		}

		//扫码入口
		ScanM() {
			var that = this;
			uni.scanCode({
				success: function(res) {
					// console.log(JSON.stringify(res));
					that.selectList.push(res.result);
					var editItem = that.selectList;
					uni.navigateTo({
						url: "./selectBusin?editItem=" +
							encodeURIComponent(JSON.stringify(editItem)),
					});
					AppModule.routerCargoAction(editItem);
				},
			});
		}
		//充电线入口
		chargerM() {
			uni.navigateTo({
				url: "../usb/choiceDevice",
			});
		}
		goCargoM() {
			// this.showDataListS.filter((item: any, index: any) => {
			// 	if (item.select == true) {
			// 		this.selectList.push(item.sn);
			// 	}
			// });
			if (this.selectList.length <= 0) {
				uni.showToast({
					title: "请选择设备",
					icon: "none",
					duration: 2000,
				});
				return
			}

			// var editItem = this.selectList;
			// uni.navigateTo({
			// 	url: "./selectBusin?editItem=" + encodeURIComponent(JSON.stringify(editItem)),
			// });
			var dic = {
				list: [],
				snlist: this.selectList,
				type: "all"
			} //扫码是只有sn
			uni.navigateTo({
				url: "./selectBusin?snAndtype=" + encodeURIComponent(JSON.stringify(dic)),
			});
			AppModule.routerCargoAction(this.selectList);

			//离开页面后清除选中的选项
			var that = this
			setTimeout(() => {
				// that.selectList = []
			}, 2000);
		}

		onNavigationBarSearchInputConfirmed() {
			this.showDataListS.splice(0, this.showDataListS.length);
			this.searchFlag = true;
			// console.log(this.showDataListS, "this.showDataListS");
			setTimeout(() => {
				// console.log(this.showDataListS, "this.-------");
				if (this.showDataListS.length == 0) {
					this.findTerminalByTypeM();
				} else {
					console.log("真美");
					//  this.findTerminalByTypeM();
				}
			}, 200);
		}

		onNavigationBarSearchInputClicked() {
			console.log(7777777)
		}

		onNavigationBarSearchInputChanged() {
			console.log(666666)
		}

		search() {
			//  this.showDataListS.splice(0, this.showDataListS.length);

			// this.searchFlag = true;

			// console.log(this.showDataListS, "this.showDataListS");

			// setTimeout(() => {
			//   console.log(this.showDataListS, "this.-------");

			//   if (this.showDataListS.length == 0) {
			//     this.findTerminalByTypeM();
			//   } else {
			//     console.log("真美");
			//     //  this.findTerminalByTypeM();
			//   }
			// }, 200);
			this.searchFlag = true;
			this.findTerminalByTypeM();
		}

		@Watch("keyword")
		userInputM(a: any) {
			console.log(a);

			// this.showDataListS.splice(0, this.showDataListS.length);

			// this.searchFlag = true;

			// console.log(this.showDataListS, "this.showDataListS");

			// setTimeout(() => {
			//   console.log(this.showDataListS, "this.-------");

			//   if (this.showDataListS.length == 0) {
			//     this.findTerminalByTypeM();
			//   } else {
			//     console.log("真美");
			//     //  this.findTerminalByTypeM();
			//   }
			// }, 500);

			//     var that=this
			//     function debounce(fn:any) {
			//     let timeout = null; // 创建一个标记用来存放定时器的返回值
			//     return function () {
			//         // 每当用户输入的时候把前一个 setTimeout clear 掉
			//         clearTimeout(timeout);
			//         // 然后又创建一个新的 setTimeout, 这样就能保证interval 间隔内如果时间持续触发，就不会执行 fn 函数
			//        var timeout:any = setTimeout(() => {
			//             fn.apply(this,arguments);
			//         }, 500);
			//     };
			// }
			// // 处理函数
			// function handle() {
			//     console.log(Math.random());
			//        that.showDataListS = [];

			//       that.findTerminalByTypeM();

			// }

			//       debounce(handle)
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-cell-box {
		height: 20rem;
		overflow-y: scroll;
	}

	.u-dropdown {
		width: 100%;
		justify-content: flex-end;
		display: flex;
		padding-right: 3rem;
	}

	/deep/.u-dropdown {
		width: 100%;
		justify-content: flex-end;
		display: flex;
		padding-right: 3rem;
	}

	.searchPP {
		background-color: white;
		padding: 0.5rem;
	}

	.searchP {
		background-color: white;
		display: flex;
		width: 100%;
		justify-content: space-between;
	}

	.scan {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.tabwiperC {
		border-bottom: 1px solid #f2f2f2;
	}

	.cargoBtnC {
		position: fixed;
		bottom: 5rem;
		right: 1rem;
		background: #02af74;
		padding: 0.6rem 0.8rem;
		/* border-radius: 0rem; */
		border-radius: 0.1rem;

		font-size: 0.83rem;
		font-family: PingFang SC;
		font-weight: 400;
		color: #ffffff;
	}

	.showDataC {
		display: flex;
		flex-wrap: wrap;
		padding: 1rem 0.5rem;
		justify-content: space-between;
	}

	.showDataC-item {
		width: 50%;
		position: relative;
	}

	.Icon {
		position: absolute;
		right: 0.25rem;
	}

	.showDataC-item-child {
		margin: 0.25rem;
		/* border: 1px solid #02B074; */
		border-radius: 0.25rem;
		/* padding: 0.5rem; */
	}

	.showDataC-item-content {
		padding: 0.5rem;
	}

	.Icon-bottom {
		position: absolute;
		bottom: 0.75rem;
		right: 0.75rem;
	}
</style>
